<template>
	<view class="guarantee" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="轮胎售后" :customBack="true" @back="back" />
		<view class="tab" :style="{top: paddingTop + 'px'}">
			<u-tabs :list="tabList" :scrollable="false" :current="current" lineColor="#CF1A1B" lineWidth="90"
				lineHeight="4" :activeStyle="{
					color: '#CF1A1B'
				}" :inactiveStyle="{
					color: 'rgba(0,0,0,0.65)'
				}" itemStyle="height: 44px;" @change="handleTab">
			</u-tabs>
		</view>
		<view
			v-if="((insuranceState == 1 || insuranceState == 3)&&list.length == 0)||(insuranceState == 4&&recordList.length == 0)"
			class="empty">
			<image src="@/static/empty.png"></image>
			<text>无数据</text>
		</view>

		<view class="list" v-if="insuranceState == 1 || insuranceState == 3">
			<view class="list-item" v-for="(item, index) of list" :key="item.id" @click="goDetail(item)">
				<view class="list-item-info">
					<view class="title">
						质保单号： {{ item.insuranceNumber }}
					</view>
					<text class="status" v-if="insuranceState == 1">质保中</text>
					<text class="status1" v-if="insuranceState == 3">已过期</text>
				</view>
				<view class="list-item-img">
					<view class="img-list">
						<image
							:src="good.goodsImg?good.goodsImg:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_nomal.png'"
							v-for="(good,index1) of item.goodsList" :key="good.id" v-if="index1<4"></image>
					</view>
					<text class="total">共{{ item.qualitySum }}件</text>
				</view>
				<view class="list-item-time">
					<text>保障期限：{{ item.startTime.slice(0,10) }}至{{ item.endTime.slice(0,11) }}</text>
				</view>
			</view>
			<uni-load-more :status="status" v-if="loadVisible" :contentText="contentText" />
		</view>
		<view class="record-list" v-else>
			<view class="record-list-item" v-for="item in  recordList" @click.native.stop="goApplyDetail(item)">
				<view class="list-item-h">
					<view class="order-num">服务单号:{{ item.claimNumber }}</view>
					<view class="status" style="color:#E2BC00" v-if="item.claimStatus == 1">审核中</view>
					<view class="status" style="color:#F68B53" v-if="item.claimStatus == 2">已驳回</view>
					<view class="status" style="color:#CF1A1B" v-if="item.claimStatus == 3">待付款</view>
					<view class="status" style="color:#0055FF" v-if="item.claimStatus == 4">待服务</view>
					<view class="status" style="color:#931FD5" v-if="item.claimStatus == 5">待服务确认</view>
					<view class="status" style="color:#1EC48A" v-if="item.claimStatus == 6">已完成</view>
				</view>
				<view class="list-item-c">
					<view class="cell">
						<view class="label">品牌型号：</view>
						<view class="info">{{ (item.brandName?item.brandName:'')+' '+(item.specsName?item.specsName:'-')}}
						</view>
					</view>
					<view class="cell">
						<view class="label">轮胎胎号：</view>
						<view class="info">{{ item.itemNumber }}</view>
					</view>
					<view class="cell">
						<view class="label">申请时间：</view>
						<view class="info">{{ item.createdTime }} </view>
					</view>
				</view>
				<view class="list-item-b" v-if="item.claimStatus == 4">
					<u-button type="primary" text="联系门店" :plain="true" @click.native.stop="callPhone(item)" icon="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/ic_dhua.png"></u-button>
					<u-button type="primary" text="门店导航" :plain="true" @click.native.stop="handleDH(item)" icon="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/ic_dh.png"></u-button>
				</view>
			</view>
			<uni-load-more :status="status" v-if="loadVisible" :contentText="contentText" />
		</view>
		<!-- 促销弹框 -->
		<u-modal :show="showVisiable" title="服务码" @confirm="showVisiable=false" confirm-color="#DE4442">
			<view class="slot-content">
				<view style="padding: 12px 0;color: rgba(0, 0, 0, 0.45)">
					<image :src="baseUrl+'/user-center/qr-code/generate?content='+currInfo.qrCodeInfo+'&width=200'">
					</image>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import navagationBar from '@/components/navigationBar.vue'
	import navBar from '@/components/navBar.vue'
	import {
		baseUrl
	} from '@/common/config'
	export default {
		components: {
			navagationBar,
			navBar
		},
		data() {
			return {
				tabList: [{
					name: '质保中',
					index: 1
				}, {
					name: '已过期',
					index: 3
				}, {
					name: '申请记录',
					index: 0
				}],
				current: 0,
				page: 1,
				size: 4,
				total: 0,
				status: 'more',
				loadVisible: false,
				insuranceState: 1, // 1质保中 2已理赔 3已过期
				list: [],
				recordList: [],
				showVisiable: false,
				currInfo: null,
				baseUrl: baseUrl,
				paddingTop: '',
				toHome: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo'])
		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.page = 1
			if (option.id == 4) {
				this.insuranceState = 4
				this.getRecordList('refresh')
				this.current = 2
			} else {
				this.getList('refresh')
			}
			if (option.toHome) {
				this.toHome = true
			}


		},
		onReachBottom() {
			if (this.insuranceState == 1 || this.insuranceState == 3) {
				if (this.list.length >= this.total) {
					this.status = 'noMore'
					return
				}
				this.loadVisible = true
				this.status = 'loading'
				this.page++
				this.getList('loading')
			} else {
				if (this.recordList.length >= this.total) {
					this.status = 'noMore'
					return
				}
				this.loadVisible = true
				this.status = 'loading'
				this.page++
				this.getRecordList('loading')
			}
		},
		onPullDownRefresh() {
			this.loadVisible = false
			this.page = 1
			if (this.insuranceState == 1 || this.insuranceState == 3) {
				this.getList('refresh')
			} else {
				this.getRecordList('refresh')

			}
		},
		methods: {
			back() {

				uni.switchTab({
					url: '/pages/mine/home'
				})
				// if(uni.getStorageSync('toGuaranteePath') == 'index'){
				// 	uni.switchTab({
				// 		url: '/pages/index/index/index'
				// 	})
				// }else{
				// 	uni.switchTab({
				// 		url: '/pages/mine/home'
				// 	})
				// }


			},
			phone() {
				console.log(999999);
			},
			//电话
			callPhone(val) {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: val.serviceTerminalInfo.phone
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: val.serviceTerminalInfo.phone,
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: val.serviceTerminalInfo.phone
								})
							}
						}
					})
				}
			},
			handleTab(item) {
				this.page = 1
				if (item.index === 0 || item.index == 1) {
					if (item.index == 0) {
						this.insuranceState = 1
					} else {
						this.insuranceState = 3
					}
					this.getList('refresh')
				} else {
					this.insuranceState = 4
					this.getRecordList('refresh')
				}

			},
			async getList(flag) {
				const res = await this.$request({
					method: 'POST',
					url: '/ltb-center/union-insurance/listByUser',
					data: {
						insuranceState: this.insuranceState,
						pageNum: this.page,
						pageSize: this.size
					}
				})
				if (flag === 'refresh') {
					this.list = []
				}
				this.total = res.datas.count
				this.list = this.list.concat(res.datas.data)
				this.loadVisible = this.total > this.size
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			async getRecordList(flag) {
				const res = await this.$request({
					method: 'POST',
					url: '/ltb-center/union-insurance-claim/listByUser',
					data: {
						pageNum: this.page,
						pageSize: this.size
					}
				})
				if (flag === 'refresh') {
					this.recordList = []
				}
				this.total = res.datas.count
				this.recordList = this.recordList.concat(res.datas.data)
				this.loadVisible = this.total > this.size
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			//联保详情
			goDetail(item) {
				uni.navigateTo({
					url: `/indexPack/guarantee/detail?id=${item.id}`
				});
			},
			//联保申请详情
			goApplyDetail(item) {
				uni.navigateTo({
					url: `/indexPack/guarantee/applyDetail?id=${item.id}`
				});
			},

			//查看门店
			goStore(val) {
				uni.navigateTo({
					url: `/indexPack/guarantee/vicinityStore?thirdId=${val.thirdId}`
				})
			},
			//去门店
			handleDH(val) {
				const {
					lng,
					lat,
					name,
					address
				} = val.serviceTerminalInfo
				uni.openLocation({
					longitude: lng,
					latitude: lat,
					name,
					address,
				});
			},
			showCode(val) {
				this.currInfo = val
				this.showVisiable = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guarantee {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		/deep/ .u-tabs__wrapper__nav__line {
			margin-left: 22px;
			font-size: 14px;
		}

		.empty {
			width: 100%;
			height: 80%;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 220px;
				height: 180px;
			}

			text {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.45);
				line-height: 30rpx;
			}
		}

		.navbar {
			width: 100%;

			.header {
				width: calc(100% - 200rpx);
				position: fixed;
				display: flex;
				align-items: center;
				// justify-content: space-between;

				&-back {
					margin-left: 0;
					display: flex;
					align-items: center;

					text {
						margin-left: 10px;
					}
				}

				.kefu {
					float: right;
				}
			}
		}

		.tab {
			z-index: 99;
			position: fixed;
			width: 100%;
			background-color: #FFFFFF;
		}

		.list {
			z-index: 1;
			padding-top: 44px;

			&-item {
				background-color: #FFFFFF;
				margin-top: 20rpx;
				padding: 32rpx 36rpx 44rpx;
				font-size: 14px;

				&-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
					padding-bottom: 26rpx;

					.line {
						padding: 0 10rpx;
					}

					.title {
						width: calc(100% - 150rpx);
						white-space: nowrap;
						word-wrap: break-all;
						overflow: hidden;
						text-overflow: ellipsis;

						.num {
							flex: 1;
						}

						.name {
							width: 200rpx;
						}
					}

					.status {
						width: 150rpx;
						text-align: right;
						font-weight: 400;
						color: #CF1A1B;
					}

					.status1 {
						width: 150rpx;
						text-align: right;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.65);
					}
				}

				&-img {
					padding: 28rpx 0;

					image {
						width: 62px;
						height: 62px;
						margin-right: 20rpx;
					}

					.total {
						font-weight: bold;
						width: 100rpx;
						color: rgba(0, 0, 0, 0.85);
					}

					.img-list {
						width: calc(100% - 100rpx);
						display: flex;
					}

					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				&-time {}
			}
		}

		.record-list {
			z-index: 1;
			padding-top: 44px;

			.record-list-item {
				background-color: #FFFFFF;
				margin-top: 20rpx;
				padding: 32rpx 36rpx 0;
				font-size: 14px;
				margin-bottom: 20rpx;

				.list-item-h {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
					padding-bottom: 32rpx;

					.order-num {
						width: calc(100% - 170rpx);
						white-space: nowrap;
						word-wrap: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
					}

					.status {
						width: 170rpx;
						text-align: right;
						font-weight: 400;
					}

					.color1 {
						color: #1EC48A;
					}

					.color2 {}

					.color3 {}

					.color4 {}
				}

				.list-item-c {
					padding-top: 36rpx;

					.cell {
						display: flex;
						justify-content: flex-start;
						padding-bottom: 32rpx;

						.label {
							width: 170rpx;
							text-align: right;
							margin-right: 20rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.45);
						}

						.info {
							width: calc(100% - 170rpx);
							font-weight: 400;
							color: rgba(0, 0, 0, 0.85);
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.list-item-b {
					height: auto;
					display: flex;
					justify-content: space-between;
					padding: 26rpx 0;
					border-top: 1px solid rgba(0, 0, 0, 0.1);

					/deep/ .u-button {
						margin: 0 20rpx;
						image{
							width: 80rpx !important;
							height: 80rpx !important;
						}

					}
				}
			}
		}
	}
</style>